<template>
    <div class="evaluateBox">
      <van-nav-bar
        title="发表评价"
        right-text="发布"
        left-arrow
        @click-left="toOrder"
        @click-right="onSubmit"
      />
      <van-card
        v-for="(item,idx) in proList"
        :key="idx"
        :title="item.proName"
        :thumb="item.img"
      />
      <div class="score">
        <h2>描述相符</h2>
        <van-rate v-model="value" />
      </div>
    </div>
</template>
<script>
import Vue from 'vue'
import { NavBar, Card, Rate } from 'vant'
import { getOrder, howOrder } from '@/api/request.js'

Vue.use(NavBar)
Vue.use(Card)
Vue.use(Rate)
export default {
  props: ['s'],
  data () {
    return {
      value: 0,
      tobeEvaluated: [],
      proList: [],
      orderId: []
    }
  },
  methods: {
    toOrder () {
      sessionStorage.setItem('order', 'd')
      this.$router.back()
    },
    onSubmit () {
      howOrder({
        userId: sessionStorage.getItem('userId'),
        orderId: this.orderId
      }).then(data => {
        sessionStorage.setItem('order', 'e')
        this.$router.back()
      })
    }
  },
  mounted () {
    getOrder({
      orderId: this.s
    }).then(data => {
      data.data.msg.forEach(val => {
        switch (val.state) {
          case 3:
            this.tobeEvaluated.push(val)
            break
        }
      })
      this.proList = this.tobeEvaluated[0].proData
      this.orderId = this.tobeEvaluated[0].orderId
    })
  }
}
</script>
<style lang="scss">
.evaluateBox{
  height: 100%;
  background: #efefef;
  .van-nav-bar__left{
    i{
      color: #D43F3A;
    }
  }
  .van-nav-bar__right{
    span{
      color: #D43F3A;
    }
  }
  .van-card__content{
    padding-top: 0.2rem;
    box-sizing: border-box;
  }
  .score{
    display: flex;
    text-align: center;
    .van-rate{
      margin-top: 0.06rem;
      margin-left: 0.2rem;
    }
  }
}
</style>
